<template>
  <div class="container">
    <div class="content back-fff">
      <div class="flex">
        <div class="map">
          <img :src="cdns.activity_map" />
        </div>
        <div class="text flex">
          <div v-for="(item, index) in F_Content" :key="index" style="display: flex;">
            <div
              :style="{ 'background-image': 'url(data:image/' + item.F_Img.substr(1) + ';base64,' + item.F_Content1 + ')', 'background-size': 'cover', 'width': '40%', 'background-repeat': 'no-repeat', 'margin-right': '30px' }">
            </div>
            <div v-html="item.F_Content"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content back-fff">
      <div class="calendar">
        <el-calendar v-model="value">
          <template slot="dateCell" slot-scope="{date, data}">
            <div :class="data.isSelected ? 'is-selected' : ''">
              {{ showDay(data) }}
              <!-- {{ data.day.split('-').slice(2).join('-') }} -->
              <div v-for="(item, index) in getDays(data.day)" :key="index">
                <div class="activity" :class="{ 'disabled': item.F_IsAvaiable == '0' }" @click="toForm(item)"><i
                    class="el-icon-s-flag icon"></i> {{ item.F_StartTime }} ~ {{ item.F_EndTime }}</div>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
    </div>
  </div>
</template>
<script>
import { GetScheduleTour, GetScheduleTourInfo } from "@/api/schedule";

import api from "@/network/api";
import to from "await-to-js";
import { checkResponse } from "@/network/vertify";

const { IsUserScheduleTourSignedUp } = api;

const IsUserScheduleTourSignedUpAsync = async (params) => {
  const [err, response] = await to(IsUserScheduleTourSignedUp(params));
  var [state, data] = checkResponse(err, response);
  if (!state) return false;
  return data;
};

export default {
  inject: ["cdns"],
  data() {
    return {
      value: "",
      Year: new Date().getFullYear(),
      month: new Date().getMonth() + 1,
      scheduleTour: [],
      F_Content: [],
      timer: null,
      nowDay: ''
    };
  },
  mounted() {
    this.GetScheduleTourAsync()
    GetScheduleTourInfo().then((res) => {
      this.F_Content = res.data.Data;
    });
  },
  watch: {
    nowDay(newval, oldval) {
      if (newval != oldval) {
        this.Year = new Date(newval).getFullYear()
        this.month = new Date(newval).getMonth() + 1

        this.GetScheduleTourAsync()
      }
    }
  },
  methods: {
    GetScheduleTourAsync() {
      GetScheduleTour({ Year: this.Year, month: this.month }).then((res) => {
        let scheduleTour = res.data.Data || [];
        scheduleTour = scheduleTour.map((item) => {
          item.F_ScheduleDate = this.$ut.dateFormat(
            item.F_ScheduleDate,
            "YYYY-mm-dd"
          );
          item.F_StartTime = item.F_StartTime.split(":").slice(0, 2).join(":");
          item.F_EndTime = item.F_EndTime.split(":").slice(0, 2).join(":");
          return item;
        });
        this.scheduleTour = scheduleTour;
      });
    },
    showDay(data) {
      if (data.type === 'current-month') {
        this.nowDay = data.day
      }
      return data.day.split("-").slice(2).join("-");
    },
    getIsActive(day, disabled) {
      const days = this.scheduleTour.filter((o) => o.F_ScheduleDate == day);
      console.log(days, 999);
      const index = this.scheduleTour.findIndex((o) => o.F_ScheduleDate == day);
      if (index == -1) return false;
      if (disabled && this.scheduleTour[index]["F_IsAvaiable"] == "0") {
        return "disabled";
      }
      return `${this.scheduleTour[index].F_StartTime} ~ ${this.scheduleTour[index].F_EndTime}`;
    },
    getDays(day) {
      const days = this.scheduleTour.filter((o) => o.F_ScheduleDate == day);
      return days;
    },
    async toForm(item) {
      if (item.F_IsAvaiable == "0")
        return this.$message.warning({
          message: "The current schedule is no longer valid",
        });

      if (!this.$store.state.userId) {
        this.$router.push({ path: "/login" });
        return this.$message.warning({
          message: "Please login first!",
        });
      }
      if (
        !(await IsUserScheduleTourSignedUpAsync({
          UserId: this.$store.state.userId,
          ActivityId: item.F_ActivityId || "",
        }))
      )
        return this.$message.warning({
          message: "You have signed !",
        });
      this.$router.push({
        path: "/schedule/form",
        query: {
          formid: item.F_FormId || "097825ef-d952-4653-86b8-30602d60cbee",
          F_ActivityId: item.F_ActivityId || "",
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  padding: 25px;

  &:first-child {
    margin-top: 20px;
  }

  .map {
    display: none;
    width: 230px;
    height: 150px;
    margin-right: 20px;

    img {
      width: 100%;
      max-height: 100%;
    }
  }

  .text {
    align-items: flex-end;
  }
}

.back-fff {
  background-color: #fff;
}

.calendar {
  border: solid 1px #cccccc;
}

.title {
  width: 180px;
  height: 60px;
  background-color: #ffffff;
  border-top: 5px solid #2d9ef3;
  margin-top: 5px;
  line-height: 60px;
  text-align: center;
}

.activity {
  background-color: #e1ecfb;
  color: #188ee9;
  padding-left: 8px;
  margin-top: 2px;
  white-space: nowrap;

  .icon {
    color: #f47943;
  }
}

.disabled {
  background-color: #eceef0;
  color: #acb0b0;

  .icon {
    color: #acb0b0;
  }
}

// ::v-deep .el-calendar-day{
//     overflow-y: auto;
// }
</style>